<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="heshengjin QQ:2356899074">
  <title>Tdrag项目拖动实战</title>
  <style>
    *{margin:0;padding:0;list-style:none;}

    .parent{
      width: 1500px;
      height: 600px;
      border: 1px solid red;
      position: relative;
      overflow: hidden;
    }

    .outer{
      width:1495px;
      height:595px;
      position:absolute;
      left:10px;
      top:10px;
      background:url("images/lanren.png") repeat center center;
    }

    .inner{
      width:80px;
      height:80px;
      position: absolute;
      left: 10px;
      top: 10px;
      background-color: aqua;
    }

  </style>
</head>
<body>
  <!-- 代码部分begin -->
  <div class="boxList parent">
    <div class="outer">
      <div style="width:1495px;height:595px;position:absolute;left:0px;top:0px;" id="m"></div>
      <div>
        <div class="inner" id="inner_1"></div>
        <div class="inner" id="inner_2"></div>
      </div>
    </div>
  </div>


  <button id="lock">加锁</button>
  <button id="unlock">解锁</button>


  <script src="js/jquery1.7.2.js"></script>
  <script src="js/Tdrag.js"></script>
  <script type="text/javascript">

    $(function(){

        $("#unlock").click("click",function(){
//            $.disable_open();
            $("#m").css("z-index","-100000");
        });
        $("#lock").click("click",function(){
//            $.disable_cloose();
            $("#m").css("z-index","100000");
        });

      $(".outer").Tdrag({
          cbStart:function(){//移动前的回调函数
              console.log("outer->left"+$(".outer")[0].offsetLeft);
              console.log("outer->top"+$(".outer")[0].offsetTop);
          },

          cbMove:function(){//移动中的回调函数
          },

          cbEnd:function(){//移动结束时候的回调函数
              console.log("outer->left"+$(".outer")[0].offsetLeft);
              console.log("outer->top"+$(".outer")[0].offsetTop);
          }
      });



        $("#inner_1").Tdrag({
            scope:".outer",
//            disable:true,
            cbStart:function(){//移动前的回调函数
                console.log("inner->left"+$(".inner")[0].offsetLeft);
                console.log("inner->top"+$(".inner")[0].offsetTop);
            },

            cbMove:function(){//移动中的回调函数
            },

            cbEnd:function(){//移动结束时候的回调函数
                console.log("inner->left"+$(".inner")[0].offsetLeft);
                console.log("inner->top"+$(".inner")[0].offsetTop);
            }
        });

        $("#inner_2").Tdrag({
            scope:".outer",
//            disable:true,
            cbStart:function(){//移动前的回调函数
                console.log("inner->left"+$(".inner")[0].offsetLeft);
                console.log("inner->top"+$(".inner")[0].offsetTop);
            },

            cbMove:function(){//移动中的回调函数
            },

            cbEnd:function(){//移动结束时候的回调函数
                console.log("inner->left"+$(".inner")[0].offsetLeft);
                console.log("inner->top"+$(".inner")[0].offsetTop);
            }
        });

    });

  </script>
  <!-- 代码部分end -->
</body>
</html>